<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>服务套餐</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/about.css">
    <link rel="stylesheet" href="css/service.css">
</head>
<style>
</style>
<body>
     <!--顶部-->
     <div class="top_box">
        <div class="container">
               <div class="clearfix top_in">
                   <p class="left dec">SSM比赛报名系统</p>
                   <div class="right contact">

                       <div class="other_contact contact_item">
                           <a href="javascript:;">
                               <i class="iconfont icon-qq1"></i>
                           </a>
                           <a href="javascript:;">
                               <i class="iconfont icon-weibo"></i>
                           </a>
                           <a href="javascript:;">
                               <i class="iconfont icon-weixin"></i>
                           </a>
                       </div>
                       <!-- <div class="search contact_item">
                           <a href="javascript:;"><i class="iconfont icon-11"></i></a>
                       </div> -->
                         <div class="search contact_item">
                           <a href="javascript:;">登录</a>
                       </div>
                       <div class="search contact_item">
                        <a href="javascript:;">注册</a>
                    </div>
                   </div>
               </div>
        </div>
    </div>
    <!--导航-->
    <div class="top_nav_box">
        <div class="container">

            <div class="clearfix">
                <div class="logo left">
                    <a href="javascript:;">
                        <img src="images/logo.png" alt="">
                    </a>
                </div>
                <ul class="nav_list left clearfix">
                    <li class="item">
                        <a href="首页.html" class="nav_name" style="font-size: 20px;">首页</a>
                    </li>
                    <li class="item">
                        <a href="matchs.html" class="nav_name" style="font-size: 20px;">竞赛</a>
                    </li>
                    <li class="item">
                        <a href="course.html" class="nav_name" style="font-size: 20px;">课程</a>
                    </li>
                    <li class="item">
                        <a href="news.html" class="nav_name" style="font-size: 20px;">资讯</a>
                    </li>
                    <li class="item">
                        <a href="essay.html" class="nav_name" style="font-size: 20px;">文章</a>
                        <!-- <ul class="down_list">
                            <li class="down_list_item">
                                <a href="javascript:;">产品套餐</a>
                            </li>
                            <li class="down_list_item">
                                <a href="javascript:;">服务列表</a>
                            </li>
                        </ul> -->
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name" style="font-size: 20px;">我要发布</a>
                         <ul class="down_list">
                            <li class="down_list_item">
                                <a href="javascript:;" style="font-size: 16px;">发布比赛</a>
                            </li>
                            <li class="down_list_item">
                                <a href="javascript:;" style="font-size: 16px;">发布文章</a>
                            </li>
                        </ul>
                    </li>
                    <li class="item">
                        <a href="首页.html" class="nav_name" style="font-size: 20px;">个人中心</a>
                    </li>



                    <!-- <li class="item">
                        <a href="javascript:;" class="nav_name">H5平台系统</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">云服务器</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">联系我们</a>
                    </li> -->
                </ul>

                <ul>
                    <!-- <li class="item active" style="text-align: right;padding-right: 70px;padding-top: 32px;">
                        <input style="padding-bottom: 10px;line-height: 18px;font-size: 14px; width: 155px;height: 18px; border: 1.5px solid gray;border-radius: 12px 0px 0px 12px;border-right: none;padding-top: 10px;"
                        type="text" placeholder="搜索文章">
                        <input style="margin: 0px 0px 0px -3px;padding-bottom: 10px;line-height: 26px;font-size: 14px; width: 60px;height: 42px; border: 1px solid;border-radius: 2px 12px 12px 2px;padding-top: 8px;color:white;background-color:black;"
                         type="button" value="搜索" placeholder="搜索文章">
                    </li> -->

                </ul>
            </div>
        </div>
        </div>
        <div class="screen_small">
            <a href="javascript:;" class="small_logo">
                <img src="images/logo.png" alt="">
            </a>
            <span class="screen_small_menu"><i class="iconfont icon-caidan"></i></span>
            <ul class="screen_small_list">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">企业介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">风格演示</a>
                </li>
                <li class="">
                    <a href="javascript:;">产品套餐</a>
                </li>
                <li class="">
                    <a href="javascript:;">服务列表</a>
                </li>
                <li>
                    <a href="#">游戏列表</a>
                </li>
                <li>
                    <a href="#">H5平台系统</a>
                </li>
                <li>
                    <a href="#">云服务器</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>

            </ul>
        </div>
    </div>
    <!--产品介绍-->
    <div class="pub_banner">
        <img src="images/service/banner.png" alt="">
    </div>
    <!--服务套餐-->
    <div class="container">
        <div class="about_title">
            <h1>发布文章</h1>
        </div>

    <!-- 发布文章 -->
    <div id="boxs" style="width: 1000px;height: 2000px;margin: 0 auto;">

        <form action="/competitions/upload.do" method="POST" enctype="multipart/form-data">
            <input style="border: 4px dashed gray;border-radius: 20px;width: 950px; height: 100px;font-size: 30px;"
            type="text" name="EssName" id="EssName" placeholder="请输入文章标题">

            <div class="ndn" style="width: 1000px; height:20px ;"></div>
            <textarea name="EssText" id="EssText" cols="30" rows="10"
            style="font-size: 30px;width: 950px;height: 800px;border: 5px double gray;border-radius: 20px;" placeholder="在此键入文章内容"></textarea><br>

            <div class="ndn" style="width: 1000px; height:15px ;"></div>
            <a style="font-size: 20px;color: gray;">上传图片</a><br>
            <div class="ndn" style="width: 1000px; height:10px ;"></div>

            <input type="file" name="file" placeholder="插入图片" style="width: 320px;height: 50px;border: 2.5px dashed gray;
            border-radius: 20px;">
            <input type="submit" value="发布" style="width: 100px;height: 50px;font-size: 20px;border-radius: 15px;background-color:black;color: white;">
        </form>

    </div>


    <!--footer-->
    <div class="footer">
        <div class="container">
            <div class="footer_top clearfix">
                <dl class="footer_code left">
                    <dt>
                        <img src="images/code.png" alt="">
                    </dt>
                    <dd>
                        <a href="#"><i class="iconfont icon-xiaoxi"></i>在线咨询</a>
                    </dd>
                </dl>
                <dl class="other_line left">
                    <dt>商户中心</dt>
                    <dd>
                        <a href="#">购买申请</a>
                    </dd>
                    <dd>
                        <a href="#">产品验证</a>
                    </dd>
                    <dd>
                        <a href="#">合作流程</a>
                    </dd>
                </dl>
                <dl class="other_line left">
                    <dt>服务内容</dt>
                    <dd>
                        <a href="#">游戏代理</a>
                    </dd>
                    <dd>
                        <a href="#">游戏盒子</a>
                    </dd>
                    <dd>
                        <a href="#">H5平台系统</a>
                    </dd>
                </dl>
                <dl class="other_line left">
                    <dt>关于215</dt>
                    <dd>
                        <a href="#">企业介绍</a>
                    </dd>
                    <dd>
                        <a href="#">公司证件</a>
                    </dd>
                    <dd>
                        <a href="#">招聘信息</a>
                    </dd>
                </dl>
                <dl class="left footer_contact other_line">
                    <dt>联系方式</dt>
                    <dd>
                        <span class="contact_icon"><i class="iconfont icon-dingwei"></i></span>
                        XXX
                    </dd>
                    <dd>
                        <span class="contact_icon"><i class="iconfont icon-dianhua1"></i></span>
                        XXX
                    </dd>
                    <dd>
                        <span class="contact_icon"><i class="iconfont icon-youxiang"></i></span>
                        XXX
                    </dd>
                </dl>
            </div>
            <div class="footer_line">
                    <span>友情链接：</span>
                    <a href="#">百度一下</a> |<a href="#">优酷视频</a> |<a href="#">腾讯视频</a>
            </div>
            <div class="footer_ban">
                <div class="left footer_ban_l">
                    <a href="#">版权所有 © XXX   沪ICP备XXX号-19  </a>
                </div>
                <div class="right footer_ban_r">
                    <img src="images/footer_logo.png" alt=""> |
                    <img src="images/footer_jw.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--浮层-->
    <div class="float_box">
        <div class="float_up">
            <p>TOP</p>
            <span><i class="iconfont icon-jiantou-up"></i></span>
        </div>
        <ul class="float_list">
            <li>
                <span><i class="iconfont icon-qq"></i></span>
                <div class="show_box">
                    <a href="javascript:;">立即咨询</a>
                </div>
            </li>
            <li>
                <span><i class="iconfont icon-dianhua"></i></span>
                <div class="show_box">
                    <p>XXX</p>
                </div>
            </li>
            <li>
                <span><i class="iconfont icon-weixin1"></i></span>
                <div class="show_box">
                    <img src="images/code2.png" alt="" class="code">
                    <p>扫一扫，关注哦~</p>
                </div>
            </li>
        </ul>
        <div class="float_down">
            <span><i class="iconfont icon-jiantou-down"></i></span>
        </div>
    </div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="lib/swiper/js/swiper.min.js"></script>
<script src="js/common.js"></script>
<script>

  $(function(){

      var tabsSwiper = new Swiper('#about_tab',{
          speed:500,
          spaceBetween: 20,
          onSlideChangeStart: function(){
              $(".about_nav .active").removeClass('active')
              $(".about_nav a").eq(tabsSwiper.activeIndex).addClass('active')
          }

      });
      $(".about_nav a").on('touchstart mousedown',function(e){
          e.preventDefault()
          $(".about_nav .active").removeClass('active')
          $(this).addClass('active')
          tabsSwiper.slideTo( $(this).index() )
      });
      $(".about_nav a").click(function(e){
          e.preventDefault()
      });


//      var swiper = new Swiper('#list', {
//          pagination: '.swiper-pagination',
//          slidesPerView: 5,
//          slidesPerColumn: 2,
//          paginationClickable: true,
//          spaceBetween: 30,
//          nested:true
//      });

      var swiper_fn = new Swiper('#fn_list', {
          pagination: '.swiper-pagination',
          slidesPerView: '1',
          centeredSlides: false,
          paginationClickable: true,
          spaceBetween: 10,
          nested:true
      });
      function _resize(){
          var w = $(window).width();

          if(w<=700){
              var swiper = new Swiper('#list', {
                  pagination: '.swiper-pagination',
                  slidesPerView: 1,
                  slidesPerColumn: 2,
                  paginationClickable: true,
                  spaceBetween: 30,
                  nested:true
              });
          }else if(w<=991&&w>=768){
              var swiper = new Swiper('#list', {
                  pagination: '.swiper-pagination',
                  slidesPerView: 3,
                  slidesPerColumn: 2,
                  paginationClickable: true,
                  spaceBetween: 30,
                  nested:true
              });
          }else if(w>=992&&w<=1199){
              var swiper = new Swiper('#list', {
                  pagination: '.swiper-pagination',
                  slidesPerView: 4,
                  slidesPerColumn: 2,
                  paginationClickable: true,
                  spaceBetween: 30,
                  nested:true
              });

          }else{
              var swiper = new Swiper('#list', {
                  pagination: '.swiper-pagination',
                  slidesPerView: 5,
                  slidesPerColumn: 2,
                  paginationClickable: true,
                  spaceBetween: 30,
                  nested:true
              });

          }
      }
      _resize();

      $(window).resize(function(){
          _resize();
      });

      $('.list').each(function (index,el) {
            $(el).hover(function(){
                $(this).addClass('hover');
            },function(){
                $(this).removeClass('hover');
            });
      });


  });



</script>
